<template>
  <div>
    <cards :cards="cards"></cards>
    <ocean :use="template"></ocean>
    <ocean :use="dialog"></ocean>
  </div>
</template>

<script setup lang="tsx">

import { useTableTemplate, useDialog } from '@/ocean/index';
import Cards from '@/components/colorCards.vue';
import { reactive, ref } from 'vue';
import Form from './dialog/form1.vue'

let dialog = useDialog('编辑', Form);

let cards = [
  { type: 1, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
  { type: 2, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
  { type: 3, title: '数据展示', value: '1,000条', icon: 'ChartPoint', },
]


let template = useTableTemplate('标签列表', {
  query: (queryData) => {
    console.log(queryData)
    template.table.setData([
      { id: queryData.page + '1', name: Math.random() + '' },
      { id: queryData.page + '2', name: Math.random() + '' },
      { id: queryData.page + '3', name: Math.random() + '' },
      { id: queryData.page + '4', name: Math.random() + '' },
      { id: queryData.page + '5', name: Math.random() + '' },
      { id: queryData.page + '6', name: Math.random() + '' },
      { id: queryData.page + '7', name: Math.random() + '' },
      { id: queryData.page + '8', name: Math.random() + '' },
      { id: queryData.page + '9', name: Math.random() + '' },
      { id: queryData.page + '10', name: Math.random() + '' },
    ]);
    template.pagination.setCount(22)
  },
});

// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')
// template.card('数据展示', '1,000条', 'ChartPoint')

template.form.setModel({
  name: 'heheda',
  age: 18,
  date: new Date().valueOf(),
  other: '123123123',
  color: '',
})

template.form.item('通过姓名查询', 'name').input();

template.button('添加', { type: 'primary' }).click(() => { console.log('1111') })
template.button('编辑')
template.button('删除')

template.table.setAttrs({
  rowKey: row => row.id,
  defaultCheckedRowKeys: ['11'],
})

// template.table.column({ type: 'selection' });
template.table.column('ID', 'id');
template.table.column('姓名', 'name');
// template.table.column({
//   render: (row) => <n-button on-click={() => dialog.open({ text: row.name })} >编辑</n-button>
// });

template.query();

</script>
<style>

</style>